<template>
    <div>
        <div>
            <el-row>
                <el-col :span="4">
                    <el-input type="text" v-model="form.username" clearable placeholder="用户名\关键词"></el-input>
                </el-col>
                <el-col :span="1">
                    <el-button type="success" @click="getUserList">查询</el-button>
                </el-col>
            </el-row>
        </div>
        <el-table :data='userList.list' style="width: 100%">
            <el-table-column prop="id"  label="编号">
                <template slot-scope="scope">
                    <span>{{(userList.pageNum - 1) * pageSize + scope.$index + 1}}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="username"
                label="用户名">
            </el-table-column>

            <el-table-column
                prop="phone"
                label="手机号">
            </el-table-column>

            <el-table-column
                prop="email"
                label="邮箱">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.email === null">无信息</el-tag>
                </template>
            </el-table-column>

            <el-table-column
                prop="created"
                label="创建时间">
            </el-table-column>

            <el-table-column
                prop="updated"
                label="修改时间">
            </el-table-column>

            <el-table-column
                prop="name"
                label="真实姓名">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.name === null">无信息</el-tag>
                </template>
            </el-table-column>

            <el-table-column
                prop="status"
                label="使用状态">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.status === '1'">正常</el-tag>
                    <el-tag type="danger" v-if="scope.row.status === '0'">冻结</el-tag>
                </template>
            </el-table-column>

            <el-table-column
                prop="qq"
                label="qq密码">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.qq === null">无信息</el-tag>
                </template>
            </el-table-column>

            <el-table-column
                prop="sex"
                label="性别">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.sex === '1'">男</el-tag>
                    <el-tag type="danger" v-if="scope.row.sex === '0'">女</el-tag>
                </template>
            </el-table-column>

            <el-table-column
                prop="userLevel"
                label="会员等级">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.userLevel === null">无信息</el-tag>
                </template>
            </el-table-column>

            <el-table-column
                prop="points"
                label="积分">
            </el-table-column>

            <el-table-column
                prop="experienceValue"
                label="经验值">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.experienceValue === null">无信息</el-tag>
                </template>
            </el-table-column>

            <el-table-column
                prop="birthday"
                label="出生年月日">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.birthday === null">无信息</el-tag>
                </template>
            </el-table-column>

            <el-table-column
                prop="lastLoginTime"
                label="最后登录时间">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.lastLoginTime === null">无信息</el-tag>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="this.pageNum"
                :page-sizes="[5,10,15,20]"
                :page-size="this.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="this.userList.total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
  name: 'UserList',
  data () {
    return {
      userList: {},
      form: {
        username: ''
      }
    }
  },
  created () {
    // this.$http.post('tbuser/user/list').then(response => {
    //   this.userList = response.data
    // })
    this.getUserList()
  },
  methods: {
    // 分页列表
    getUserList () {
      // 获取列表数据
      this.$http.post('tbuser/user/list', {username: this.form.username, pageNum: this.pageNum, pageSize: this.pageSize}).then(res => {
        // 处理结果，根据自己业务接口返回结构赋值数据
        if (res.code === 20000) {
          this.userList = res.data
        }
      })
    },
    // 每页条数发生变化
    handleSizeChange (newPageSize) {
      this.pageSize = newPageSize
      this.getUserList()
    },
    // 当前页码发生变化
    handleCurrentChange (newPageNum) {
      console.log('当前页码:', newPageNum)
      this.pageNum = newPageNum
      this.getUserList()
    }
  }
}
</script>
<style scoped>

</style>
